<template>
  <!-- 催收执行页-案件信息模块-附件信息 -->
  <section class="component annex-info ">
    <data-box :data="dataSet" :page="pageService" :sort="sortService" @onPageChange="queryPageInfo" ref="data-box" class="annex-info-data-box">
      <template slot="columns">
        <el-table-column prop="originalName" label="文件名" :min-width="$helper.getColumnWidth(7)"></el-table-column>
        <el-table-column prop="operatorRealName" label="上传人" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="createTime" label="上传时间" :formatter="row => $filter.dateTimeFormat(row.createTime)" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column label="操作" :min-width="$helper.getOperateWidth(1)">
          <template slot-scope="scope">
            <el-button type="text">
              <el-image 
                style="width:50px;height:50px;margin-top:10px"
                :src="scope.row.url" 
                :preview-src-list="srcList">
              </el-image>
            </el-button>
            <el-button type="text" @click="$common.downloadFile(scope.row.url,scope.row.originalName)" class="btn">下载</el-button>
            <el-button type="text" @click="onClickDelete(scope.row)" v-auth='113' class="btn">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from "~/core/decorator";
import { PageService } from '~/utils/page.service';
import { SortService } from "~/utils/sort.service";

import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { Emit, Prop, Watch } from "vue-property-decorator";
import ViewAttachList from "~/components/common/view-attach-list.vue";
import { namespace } from "vuex-class";

const CollectionExecutionModule = namespace("collection-execution");
@Component({
  components: {

    ViewAttachList
  },
})
export default class AnnexInfo extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseOperatorPageService) private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId;

  private dataSet: any[] = [];
  private fileDataSet: any[] = []
  private srcList: string[] = []

  private fileIds: string = ""

  public queryInfo(id: string) {
    this.caseOperatorPageService.queryCaseUploadFile(id, this.pageService, this.sortService).subscribe(
      data => {
        this.dataSet = data
        this.dataSet.forEach(item =>{
          this.srcList.push(item.url)
        })
      }
    )
  }

  private refreshData() {
    this.activated()
  }

  private activated() {
    if (this.caseId) this.queryInfo(this.caseId)
  }

  private queryPageInfo() {
    if (this.caseId) this.queryInfo(this.caseId)
  }

  private onClickDelete(row) {
    this.caseOperatorPageService.deleteCaseUploadFileById(row.id).subscribe(
      data => {
        this.queryInfo(this.caseId)
        this.$message.success('删除成功！')
      }
    )
  }

}
</script>

<style lang="less" scoped>
</style>
